<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>CSS Grid | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">October 13, 2016</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">CSS Grid</h1>
  <div class="content">
    

<h1 id="css-grid">CSS Grid</h1>

<h2 id="介绍">介绍</h2>

<p>CSS Grid 布局是一个二维基于网格的布局系统，目的是彻底改变我们设计基于网格的用户界面。CSS一直被用于布局网页，但是一直没有做好。一开始我们用<code>tables</code>，接着<code>floats</code>，<code>positions</code>和<code>inline-block</code>，但是所有的这些方法本质上都是<code>hacks</code>并且遗留了很多的问题（比如，垂直居中）。<code>Flexbox</code>横空出世，但是它是针对简单的一维布局，没有完全的二维布局。<code>Grid</code>是迄今为止最先的特殊设计的 css 模型，目的是解决迄今为止我们开发网页的时候遇到的布局问题。</p>

<h2 id="父元素属性">父元素属性</h2>

<h3 id="display">display</h3>

<p>值：
* grid - 块级grid
* inline-grid 内联grid</p>

<pre><code class="language-css">.container{
	display: grid|inline-grid;
}
</code></pre>

<p>Note: <code>column</code>,<code>float</code>,<code>clear</code>,<code>vertical-align</code>对container没有影响</p>

<h3 id="grid-template-columns-grid-template-rows">grid-template-columns grid-template-rows</h3>

<p>值：</p>

<ul>
<li><track-size> - 可以是lenght，百分比，自由空间的一部分（单位fr）</li>
<li><line-name> - 自定义的name</li>
<li>subgrid - 如果container本身就是grid item，可以使用这个属性设置items的rows／columns 继承自身的sizes</li>
</ul>

<pre><code class="language-css">.container{
	grid-template-columns:&lt;track-size&gt;...|&lt;line-name&gt;&lt;track-size&gt; ... | subgrid;
	grid-template-rows:&lt;track-size&gt;...|&lt;line-name&gt;&lt;track-size&gt; ... | subgrid;
}
</code></pre>

<p>示例:</p>

<pre><code class="language-css">.container{
	grid-template-columns: 40px 50px auto 50px 40px;
	grid-template-rows: 25% 100px auto;
}
</code></pre>

<p><img src="../../notes/images/grid/grid-numbers.png" alt="" /></p>

<pre><code class="language-css">.container{
	grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
	grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
</code></pre>

<p><img src="../../notes/images/grid/grid-names.png" alt="" /></p>

<p>repeat()</p>

<pre><code class="language-css">.container{
	grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
</code></pre>

<p>使用<code>fr</code>设置百分比</p>

<pre><code>.container{
	grid-template-columns: 1fr 1fr 1fr;
}
</code></pre>

<h3 id="grid-template-areas">grid-template-areas</h3>

<p>值：
* <grid-area-name> - 用户自定义的item name
* . - 空的单元格
* none - 没有单元格</p>

<p>示例：</p>

<pre><code class="language-css">.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}

.container{
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: &quot;header header header header&quot;
                       &quot;main main . sidebar&quot;
                       &quot;footer footer footer footer&quot;
}
</code></pre>

<p><img src="../../notes/images/grid/grid-template-areas.png" alt="" /></p>

<h3 id="grid-column-gap-grid-row-gap">grid-column-gap grid-row-gap</h3>

<p>值
* <line-size> - length value</p>

<pre><code class="language-css">.container{
	grid-column-gap: &lt;line-size&gt;;
	grid-row-gap: &lt;line-size&gt;;
}
</code></pre>

<pre><code class="language-css">.container{
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}```


### justify-items

Y轴对齐方式

值：
* start
* end
* center
* stretch


### align-items

X轴对齐方式

值：
* start
* end
* center
* stretch

### justify-content

值：
* start
* end
* center
* stretch
* space-around
* space-between
* space-evenly

### align-content

容器垂直对齐

值：

* start
* end
* center
* stretch
* space-around
* space-between
* space-evenly


### grid
缩写


## items

### grid-column-start grid-column-end grid-row-start grid-row-end

值：
* &lt;line&gt; - 数字，单元格的索引
* span&lt;number&gt; - 跨度 多个items
* span&lt;name&gt; - 跨度 指定name
* auto

示例：

```css
.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}
</code></pre>

<p><img src="../../notes/images/grid/grid-start-end-a.png" alt="" /></p>

<pre><code class="language-css">.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}
</code></pre>

<p><img src="../../notes/images/grid/grid-start-end-b.png" alt="" /></p>

<h3 id="grid-column-grid-row">grid-column grid-row</h3>

<p>值：
* <start-line> / <end-line> - 包括span</p>

<p>示例：</p>

<pre><code class="language-css">.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}
</code></pre>

<p><img src="../../notes/images/grid/grid-start-end-c.png" alt="" /></p>

<h3 id="grid-area">grid-area</h3>

<p>缩写：grid-row-start + grid-column-start + grid-row-end + grid-column-end</p>

<p>值：
* <name> - 自定义名称
* <row-start> / <column-start> / <row-end> / <column-end> - can be numbers or named lines</p>

<pre><code class="language-css">.item-d{
  grid-area: header
}
</code></pre>

<pre><code class="language-css">.item-d{
  grid-area: 1 / col4-start / last-line / 6
}
</code></pre>

<h3 id="justify-self">justify-self</h3>

<p>水平对齐</p>

<h3 id="align-self">align-self</h3>

<p>垂直对齐</p>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


